<template>
  <ListLayout class="rzbl-list-warp">
    <el-table
      slot="table"
      class="background-table"
      :data="page.list"
      stripe
      style="overflow-y: auto;"
    >
      <el-table-column show-overflow-tooltip label="租赁资源" prop="zlResources"></el-table-column>
      <el-table-column show-overflow-tooltip label="办理时间" prop="blTime"></el-table-column>
      <el-table-column show-overflow-tooltip label="租客" prop="zkName"></el-table-column>
      <el-table-column show-overflow-tooltip label="租期" prop="startTime">
        <template slot-scope="scope">
          {{scope.row.startTime}} 至 {{scope.row.endTime}} 
        </template>
      </el-table-column>
       <el-table-column show-overflow-tooltip label="状态" prop="status" width="100">
          <template slot-scope="scope">
           <p v-if="scope.row.status=='dbl'" class="red">待办理</p>
           <p v-if="scope.row.status=='blz'" class="blue">办理中</p>
           <p v-if="scope.row.status=='ybl'" class="info">已办理</p>
        </template>
       </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text">办理入驻</el-button>
          <el-button type="text">查看合同</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      slot="page"
      style="margin-top:5px"
      background
      layout="total, prev, pager, next"
      :total="page.total"
      :page-size="page.pageSize"
      :current-page.sync="page.pageNum"
      @current-change="pageNoToggleHandler"
      @size-change="pageSizeToggleHandler"
    ></el-pagination>
    <bj :ref="dialogRef"></bj>
  </ListLayout>
</template>

<script>
export default JBoot({
  data() {
    return {
      moduleName: "rzbl",
      color: "#6666FF"
    };
  },

  computed: {},

  methods: {
    getQueryParam() {
      return Object.assign({}, this.queryFormData, { id: this.id });
    },
    initPageInfo(responseData) {
      this.$set(this.page, "list", responseData || []);
    }
  },

  watch: {}
})
  .list()
  .build();
</script>

<style lang="scss">
.rzbl-list-warp {
  height: calc(100% - 20px);
  .red{
    color: red;
  }
  .blue{
    color: blue;
  }
  .info{
    color: #333;
  }
  .table {
    height: calc(100% - 15px) !important;
    overflow-y: auto;
  }
}
</style>
